<template>
  <a-select
    style="width: 100%"
    allowClear
    show-search
    :mode="mode"
    :max-tag-count="props.maxTagCount"
    :placeholder="props.placeholder"
    :filter-option="false"
    v-model:value="modelValue"
    :not-found-content="fetching ? undefined : null"
    :options="configOptions"
    :token-separators="tokenSeparators"
    @search="search"
    @change="change"
  >
  </a-select>
</template>
<script setup>
import { ref, useAttrs, watch } from 'vue'
import { config_list_column_post_ } from 'server/apis/1890.js'
const props = defineProps({
  placeholder: {
    type: String,
    default: '请选择'
  },
  mode: {
    type: String,
    default: ''
  },
  maxTagCount: {
    type: Number,
    default: 1
  },
  tokenSeparators: {
    type: Array
  },
  value: {
    type: [Array, String]
  }
})
const emits = defineEmits(['update:value', 'change'])

const modelValue = ref([])
watch(
  () => props.value,
  val => {
    modelValue.value = val
  },
  {
    immediate: true
  }
)

watch(
  () => modelValue.value,
  val => {
    emits('update:value', val)
  }
)
const change = (value, option) => {
  emits('change', value, option)
}
const { menuName, columnName } = useAttrs()
const { search, configOptions, fetching } = config_list_column_post_(
  menuName,
  columnName
)
</script>
<style lang="scss" scoped></style>
